<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        var count1;
        $(function () {

            var user = JSON.parse(sessionStorage.getItem("user"));

            //获取url上的id值
            var params = getParams();

            if (params.id) {
                //获取日报相关信息
                $.get('/dailys/' + params.id, function (data) {
                    $(".newsDetail").renderValues(data);
                    $(".newsDetail").find("img").css("width", "100%");
                    $(".newsDetail").find("img").css("height", "auto");
                });
                //获取日报评论的数目
                $.get('/dailyComments/' + params.id, function (data) {
                    $("#commentCount").html(data);
                });

                //查询多少个人收藏
                $.get("/myCollections/selectCollection",{'dailyId':params.id},function (data) {
                    $("#collectCount").html(data);
                    count1=data
                })



                //var userId = user.id;
                //查询当前用户是否有收藏当前游记
                if (user){
                    $.ajax({
                        async: false,
                        url: "/myCollections",
                        method: "get",
                        data: {
                            dailyId: params.id,
                            userId: user.id
                        },
                        success:function (data) {
                            if (data){
                                $("#collectBtn").css("color","yellow");
                                $("#collectBtn").removeClass("fa-star-o");
                                $("#collectBtn").addClass("fa-star");
                            } else {
                                $("#collectBtn").css("color","rgb(33, 37, 41)");
                            }
                        }
                    });
                }
                //收藏
                $("#collectBtn").click(function () {
                    if (user){
                        if ($("#collectBtn").css("color")=="rgb(33, 37, 41)") {
                            //发送post,添加收藏
                            $.post("/myCollections",{'daily.id':params.id,'user.id':user.id},function (data) {
                                if(data.success){
                                    count1 = count1+1;
                                    $("#collectBtn").css("color","yellow");
                                    $("#collectBtn").removeClass("fa-star-o");
                                    $("#collectBtn").addClass("fa-star");
                                    $("#collectCount").html(count1);
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '收藏成功',
                                        autoClose: 300,
                                        position: 'center'  // center: 居中; bottom: 底部
                                    });
                                }else{
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '网络繁忙,请稍候',
                                        autoClose: 300,
                                        position: 'center'  // center: 居中; bottom: 底部
                                    });
                                }
                            });
                        } else {
                            //发送delete请求,取消收藏
                            $.ajax({
                                url:"/myCollections?dailyId="+params.id+"&userId="+user.id,
                                method:"delete",
                                success:function (data) {
                                    if (data.success){
                                        count1 = count1-1;
                                        $("#collectBtn").css("color","rgb(33, 37, 41)");
                                        $("#collectBtn").removeClass("fa-star");
                                        $("#collectBtn").addClass("fa-star-o");
                                        $("#collectCount").html(count1);
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '取消收藏',
                                            autoClose: 300,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                    } else{
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '网络繁忙,请稍候',
                                            autoClose: 300,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                    }
                                }
                            });
                        }
                    }else{
                        window.location.href = 'login.html?authorId=2';
                    }
                });
            }
            $("#commentBtn").click(function () {
                location.href = "/mine/dailyComment.html?dailyId=" + params.id;
            });

            /*$(function () {
                //返回顶部
                //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 100) {
                        console.log(111);
                        $("#back-to-top").fadeIn(1500);
                    }
                    else {
                        console.log(222);
                        $("#back-to-top").fadeOut(1500);
                    }
                });

                //当点击跳转链接后，回到页面顶部位置
                $("#back-to-top").click(function () {
                    //$('body,html').animate({scrollTop:0},1000);
                    if ($('html').scrollTop()) {
                        $('html').animate({scrollTop: 0}, 1000);
                        return false;
                    }
                    $('body').animate({scrollTop: 0}, 1000);
                    return false;
                });
            });*/
        });
    </script>
</head>

<body>
<a name="top"></a>
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>

<div class="newsDetail">
    <div>
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverUrl">

        <div class="container">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type">美图美文</span>
                </div>
                <div class="col-2">
                </div>
                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type">骡窝官方</span>
                </div>
            </div>

            <div class="detail">
                <h2 class="title" render-html="title"></h2>
                <div class="content" render-html="dailyContent.content"></div>
            </div>

            <hr>
            <div class="container d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
                    <span>0</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
                    <span id="commentCount"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
                    <span id="collectCount"></span>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    /*返回顶部*/
    p#back-to-top {
        position: fixed;
        display: none;
        bottom: 100px;
        right: 80px;
    }

    p#back-to-top a {
        text-align: center;
        text-decoration: none;
        color: #ab1e1e;
        display: block;
        width: 64px;
        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
        -moz-transition: color 1s;
        -webkit-transition: color 1s;
        -o-transition: color 1s;
    }

    p#back-to-top a:hover {
        color: #979797;
    }

    p#back-to-top a span {
        background: transparent url(/img/back-top.png) no-repeat -25px -290px;
        border-radius: 6px;
        display: block;
        height: 64px;
        width: 56px;
        margin-bottom: 5px;
        /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
        -moz-transition: background 1s;
        -webkit-transition: background 1s;
        -o-transition: background 1s;
    }

    #back-to-top a:hover span {
        background: transparent url(/img/back-top.png) no-repeat -25px -290px;
    }
</style>
</body>
</html>